<template>
  <div id="defd" class="container-box">
    <div class="box">
      <div class="myName">
        <form action="/">
          <van-search
            v-model="myName"
            show-action
            placeholder="请输入要搜索的内容"
            @search="onSearch"
            @cancel="onCancel"
          ></van-search>
        </form>
      </div>

      <!-- 通讯录导航 -->
      <div class="content-box">
        <div class="nav">
          <van-row>
            <span class="nav_text" @click="navigation(1)">
              <i>通讯录</i>
            </span>
            <span v-for="(item, index) in navList" :key="index" class="nav_text">
              <i class="iconfont icon-gengduo" v-show="navList.length > 2 && i!=0"></i>
              <i class="iconfont icon-gengduo" v-show="navList.length <= 2"></i>
              <span @click="navigation(2,item,index)">{{item.name}}</span>
            </span>
          </van-row>
        </div>
        <div class="allName">
          <div class="roleName" v-for="(item,index) in deptData" :key="index" @click="dept(item)">
            <van-row v-if="item.type =='dept'" type="flex" justify="space-between" align="center">
              <van-col>
                <div class="pepName">
                  {{item.dept_name}}
                  <span>（{{item.child_sum}}）</span>
                </div>
              </van-col>
              <van-col>
                <span class="arrow-title"></span>
              </van-col>
            </van-row>
            <van-row v-if="item.type =='user'" type="flex" justify="space-between" align="center">
              <van-col>
                <div class="flex">
                  <img
                    class="imgUser"
                    :src="item.portrait?item.portrait:'https://gw.alicdn.com/tfs/TB15Q0lOmzqK1RjSZFHXXb3CpXa-400-400.png'"
                    alt
                    srcset
                  >
                  <div class="pepName">{{item.user_name}}</div>
                </div>
              </van-col>
            </van-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Watermark from "./../../utils/watermark.js";
import { maiList, listUser } from "@/api/admin";
import view_title from "../../components/public/title/title";
export default {
  components: { view_title },
  data() {
    return {
      myName: "", //搜索，
      deptData: [], //组织
      navList: [],
      person: [],
      info: {}
    };
  },
  methods: {
    dept(item) {
      //查询下一级
      console.log(item, "item");
      this.navList.push({
        name: item.dept_name,
        data: item
      });
      if (item.type == "dept") {
        this.deptData = item.children;
      }
      if (item.type == "user") {
        this.$router.push({
          path: "/Personnel",
          query: { item }
        });
        localStorage.setItem("person", JSON.stringify(item));
      }
    },
    //搜索
    onSearch() {
      this.search();
    },
    navigation(num, menu, index) {
      //通讯录导航
      if (num == 1) {
        this.initList();
        this.navList = [];
      } else if (num == 2) {
        this.navList.pop();
        let result = this.navList[this.navList.length - 1];
        this.deptData = result.data.children;
      }
    },
    //取消搜索
    onCancel() {
      this.initList();
    },
    async search() {
      let par = {
        user_name: this.myName
      };
      let { data } = await listUser(par);
      this.person = data.data.rows;
      this.deptData = this.person;
    },
    async initList() {
      let { data } = await maiList();
      if (data.status == 100) {
        this.deptData = data.data;
      }
    }
  },

  mounted: function() {
    Watermark.set(this.info.user_name);
  },
  watch: {},
  created() {
    if (localStorage.user) {
      this.info = JSON.parse(localStorage.getItem("user"));
    }

    this.initList();
  }
};
</script>
<style scoped lang="scss">
.container-box{
  padding-bottom: 50px;
}
.myName {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 0;
}
.content-box {
  padding: 50px 0 0;
  position: absolute;
  top: 0;
  left: 0px;
  right: 0px;
  bottom: 10px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.allName {
  width: auto;
  height: auto;
  background-color: #ffffff;
  padding-bottom: 70px;
}
.roleName {
  margin: 0 auto;
  width: 90%;
  border-bottom: 1px solid #ededed;
}
.pepName {
  padding: 10px 0px;
  font-size: 16px;
  color: #3a3a3a;
}
.roleUp {
  font-size: 12px;
  color: #a0a0a0;
}
.arrow-title {
  border: 1px solid #999;
  border-width: 1px 0 0 1px;
  display: inline-block;
  height: 10px;
  width: 10px;
  -webkit-transform-origin: center center;
  -webkit-transform: rotate(135deg);
  -webkit-transition: all 0.5s ease-in 0.1s;
  transform-origin: center center;
  transform: rotate(-220deg);
  transition: all 0.5s ease-in 0.1s;
}
.imgUser {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-top: 5px;
  margin-right: 10px;
}
.flex {
  display: flex;
}
.nav {
  background: #ffffff;
  margin: 10px 0;
  padding: 10px 20px;
}
.nav_text {
  font-size: 14px;
  color: #41b1ff;
}
</style>


